<template>
  <div class="select-none relative pl-2" :style="attrWidth">
    <SplitLine
      class="top-0 left-0 bottom-0"
      direction="vertical"
      :limitSize="limitSize"
      disabled
      v-model:newWidth="pageStore.attrWidth"
    />
    <div
      v-show="selectTrackOptionsConfig.length === 0"
      class="w-full h-full flex flex-col justify-center items-center"
    >
      <AttrEmptyIcon />
      <span class="text-sm">点击轨道进行编辑</span>
    </div>
    <div class="absolute top-0 left-3 right-2 bottom-0 overflow-hidden">
      <AttrContainer
        :attrData="selectTrackOptionsConfig"
        :trackId="trackStore.selectResource?.id"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import AttrContainer from "@/components/item/formItem/AttrContainer.vue";
import { useTrackState } from "@/stores/trackState";
import SplitLine from "@/components/SplitLine.vue";
import { usePageState } from "@/stores/pageState";
import { computed, reactive } from "vue";
const pageStore = usePageState();
const trackStore = useTrackState();

const TrackOptionsConfig: Record<string, any> = {};
// 将data下的配置导入
const attributeFiles = import.meta.glob("@/data/options/*.ts", { eager: true });
for (const path in attributeFiles) {
  const name = path.match(/(?<=\/)(\w+)(?=\.ts)/) || [];
  TrackOptionsConfig[name[0]] = (
    attributeFiles[path] as { Options: Record<string, any> }
  ).Options;
}

const selectTrackOptionsConfig = computed(() => {
  const optionsConfig =
    trackStore.selectResource &&
    TrackOptionsConfig[trackStore.selectResource.type];
  return optionsConfig ? optionsConfig.attributes : [];
});
const attrWidth = computed(() => ({
  width: `${pageStore.attrWidth}px`,
}));
const limitSize = reactive({
  minWidth: 300,
  maxWidth: 600,
});
</script>
